<template>
  <my-layout :tabbar-is-show="false" :is-absolute-body="false">
    <template #TopBackground>
      <my-top-background />
      <view
        style="
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background-color: #f9f9f9;
          z-index: -1;
        "
      ></view>
    </template>
    <template #Navbar>
      <view
        style="
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          position: relative;
        "
      >
        <image
          @click="goback()"
          :src="indexTabBarUrl.navigateBack"
          style="width: 30rpx; height: 30rpx; margin-left: 40rpx"
        />
        <view
          style="
            font-weight: bold;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
          "
          >投稿</view
        >
      </view>
    </template>
    <template #Body>
      <!--排行列表-->
      <view class="contribute_cons">
        <view class="contribute_nums" style="background-color: transparent">
          <view class="ctb_nums_ans">
            <image src="http://llg.qiniu.comeinvip.com/images/tg02.png"></image>
            <view class="ctb_nums_font">
              <text class="nums_font_tit">总投稿数</text>
              <text class="nums_font_num">12</text>
            </view>
          </view>
          <view class="ctb_nums_ans">
            <image
              style="margin-right: 15rpx"
              src="http://llg.qiniu.comeinvip.com/images/tg01.png"
            ></image>
            <view class="ctb_nums_font">
              <text>稿件等级</text>
              <text>4.0</text>
            </view>
          </view>
        </view>
        <view style="width: 100%">
          <!--段子投稿-->
          <view class="contribute_funtion">
            <view class="fans_tit"
              ><text>段子投稿</text><view class="fans_line"></view
            ></view>
            <view
              class="ctb_list"
              style="display: flex; flex-direction: column"
              :style="{ height: `calc(700rpx - ${subHeight}px)` }"
            >
              <input class="ctb_text" placeholder="输入稿件标题" type="text" />
              <textarea
                style="width: 100%; flex: 1"
                class="ctb_textarea"
                placeholder="请输入稿件正文"
              ></textarea>
            </view>
          </view>
          <view class="ctb_btn"> 确认投稿 </view>
        </view>
      </view>
    </template>
  </my-layout>
</template>

<script>
import util from "@/utils/util.js";
// import indexBackgroundImage from "@/static/images/top_bj.png"
import indexTabBarUrl from "@/url/index_tabBar";
import ElementInfo from "@/utils/element-info";
import TopInfo from "@/utils/top-info";
export default {
  mounted() {
    let computeSubHeightWrap = this._.throttle(this.computeSubHeight, 300, {
      leading: false,
      trailing: true,
    });
    wx.onKeyboardHeightChange(async (res) => {
      await computeSubHeightWrap(res);
    });
  },
  data() {
    return {
      subHeight: 0,
      indexTabBarUrl,
      // indexBackgroundImage: indexBackgroundImage,
      isIphoneX: false,
      navbarData: {
        // 头部组件所需参数
        showCapsule: 2, //是否显示左上角返回图标   1表示显示    0表示不显示
        positionShow: 0, //0不显示定位 1 显示定位
        backgroundCor: 3, //0 无背影色 1首页背景颜色   2白色 3有背景无定位
        statusBarHeight: uni.getSystemInfoSync()["statusBarHeight"],
        navHeight: 45,
      },
      ticketpop: false,
      prices: 360,
      currentPrice: 1,
      windowHeight: 500,
    };
  },
  onLoad() {
    // 获取手机系统信息 info.screenHeight
    const info = uni.getSystemInfoSync();
    this.windowHeight = info.screenHeight;
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.navbarData.navHeight =
      menuButtonInfo.bottom -
      info.statusBarHeight +
      (menuButtonInfo.top - info.statusBarHeight);
  },
  methods: {
    //返回上一页
    goback() {
      uni.navigateBack();
    },
    // 技术可输入高度
    async computeSubHeight(res) {
      let ctbList = await ElementInfo.getElementInfo(this, ".ctb_list");
      let screenHeight = TopInfo.getScreenHeight();
      console.log("ctbList", ctbList);
      console.log("键盘高度变化", res.height);

      if (res.height === 0) {
        this.subHeight = 0;
        return;
      }

      let keyBoardTop = screenHeight - res.height;
      console.log("键盘的 top 值为", keyBoardTop);
      let ctbListBottom = ctbList.bottom;
      console.log("ctbList 的 bottom 值为", ctbListBottom);
      let subHeight = ctbListBottom - keyBoardTop;
      console.log("键盘和 ctbList 差值为", subHeight);

      if (subHeight > 0) {
        this.subHeight = subHeight + 20;
      }
    },
  },
};
</script>

<style>
@import url("@/static/css/contents.css");
@import url("@/static/css/others.css");
.ranking_all .nobgr {
  background: transparent;
  overflow: hidden;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 750rpx;
  height: 80rpx;
}
.fans_tit {
  display: flex;
  position: relative;
}
.fans_tit text {
  color: #333;
  font-size: 36rpx;
  font-weight: bold;
}
.fans_tit view {
  width: 60rpx;
  height: 10rpx;
  background: linear-gradient(270deg, rgba(216, 216, 216, 0) 36%, #fbd632 100%);
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  opacity: 1;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 9;
}
</style>
